<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*----------------------------------------最上边导航条全部内容样式--------------------------------------------------------*/
        #deng-shang-1 { /*最上边导航条*/
            width: 1430px;
            height: 100px;
            background: #444250;
            margin: 0 auto; /*页面整体居中*/
            position: relative; /*为相对定位参照物*/
        }

        .deng-shang-1-4:hover { /*更改悬停状态*/
            color: red;
            text-decoration: none;
        }

        #deng-img-1-1 { /*左上的图*/
            width: 200px;
            height: 60px;
            position: absolute; /*绝对对定位*/
            left: 40px;
            top: 9px;
        }

        #deng-shang-1-2 { /**/
            list-style-type: none; /*去掉图标*/
            overflow: hidden; /*避免为0*/
            position: relative;
            left: 450px;
            top: 10px;
        }

        .deng-shang-1-3 {
            float: left; /*全部向左浮动*/
            margin: 10px 20px;
        }

        .deng-shang-1-4 { /*控制头部分类*/
            text-decoration: none; /*去掉下划线*/
            color: white;
            font-size: 22px;
        }

        .carousel-inner { /*轮播图*/
            position: absolute; /*绝对定位*/
            top: 10px;
            width: 1050px;
            height: 474px;
        }

        .deng-img-1 { /*轮播图内图片*/
            width: 100%;

            position: absolute;
            left: 0;
            top: 0px;
        }

     /*----------------------------------------品牌特色区域内容样式-----------------------------------------------------*/
        body {
            margin: 0;
        }

        ul {
            margin: 0;
            padding: 0;
        }

        #d4 {
            position: absolute;
            z-index: 5;
            top: 81px;
            left: 970px;

        }

        #d5 {
            position: absolute;
            z-index: 5;
            top: 81px;
            left: 270px;
        }

        #d6 {
            position: absolute;
            z-index: 5;
            top: 81px;
            left: 620px;

        }

        #greenx {
            background-color: #c30d23;
            width: 1430px;
            height: 549px;
            list-style-type: none;
            position: relative;
            text-align: center;

        }

        #d1 {
            width: 317px;
            height: 465px;
            background-color: #a20d1f;
            position: absolute;
            top: 84px;
            left: 210px;

        }

        #d2 {
            width: 317px;
            height: 465px;
            background-color: #a20d1f;
            position: absolute;
            top: 84px;
            left: 560px;

        }

        #d3 {
            width: 317px;
            height: 465px;
            background-color: #a20d1f;
            position: absolute;
            top: 84px;
            left: 910px;

        }

        #d118 {
            padding: 4px 5px;
            background: #dfd1b5;
            width: 145px;
            border-radius: 50px;
            margin: 0 auto;
            text-align: center;
            position: absolute;
            top: 26px;
            left: 645px;
        }

        #d10 {
            font-size: 18px;
            text-align: center;
            color: #dfd1b5;
            position: absolute;
            top: 300px;
            left: 705px;

            z-index: 6;
        }

        #d11 {
            font-size: 18px;
            text-align: center;
            color: #dfd1b5;
            position: absolute;
            top: 330px;
            left: 690px;

            z-index: 6;
        }

        #d12 {
            font-size: 14px;
            text-align: center;
            color: #dfd1b5;
            position: absolute;
            top: 410px;
            left: 580px;

            z-index: 6;
        }

        #d13 {
            font-size: 18px;
            text-align: center;
            color: #dfd1b5;
            position: absolute;
            top: 300px;
            left: 350px;

            z-index: 6;
        }

        #d14 {
            font-size: 18px;
            text-align: center;
            color: #dfd1b5;
            position: absolute;
            top: 330px;
            left: 330px;

            z-index: 6;
        }

        #d15 {
            font-size: 14px;
            text-align: center;
            color: #dfd1b5;
            position: absolute;
            top: 410px;
            left: 240px;

            z-index: 6;
        }

        #d16 {
            font-size: 18px;
            text-align: center;
            color: #dfd1b5;
            position: absolute;
            top: 300px;
            left: 1060px;

            z-index: 6;
        }

        #d17 {
            font-size: 18px;
            text-align: center;
            color: #dfd1b5;
            position: absolute;
            top: 330px;
            left: 1040px;

            z-index: 6;
        }

        #d18 {
            font-size: 14px;
            text-align: center;
            color: #dfd1b5;
            position: absolute;
            top: 410px;
            left: 940px;

            z-index: 6;
        }

        /*------------------------------------------------新闻区域样式------------------------------------------------*/
        body {
            font-family: PingFang SC, Helvetica Neue, Helvetica, Arial, Hiragino Sans GB, Microsoft Yahei, \\5FAE软雅黑, STHeiti, \\534E文细黑, sans-serif;
            margin: 0;
            padding: 0;
        }

        #philosophy {
            width: 1430px;
            height: 526px;
            background: #302a34;
            text-align: center;
            position: relative;
        }

        .container {
            max-width: 1100px;
            margin: 0 auto;
            padding-right: 15px;
            padding-left: 15px;
            text-align: center;
        }

        .row {
            margin-left: -15px;
            margin-right: -15px;
        }

        .item-title {
            text-align: center;
            padding-top: 20px;
        }

        .item-title > h1 {
            color: #302a34;
            margin: 0 auto;
            font-weight: normal;
            padding: 4px 5px;
            font-size: 20px;
            background: #dfd1b5;
            border-radius: 50px;
            width: 145px;
        }

        .col-5.item-news {
            text-align: left;
            color: #fff;
            width: 428px;
            height: 420px;
            float: left;
            min-height: 1px;
            padding-left: 15px;
            padding-right: 15px;
            position: relative;
            display: block;
        }

        .news-img {
            width: 287px;
            height: 146px;
        }

        .news-img img {
            width: 100%;
            height: 100%;
        }

        .news-text h4 {
            padding: 20px 0 10px 0;
            margin: 0;
            font-size: 18px;
            font-weight: 200;
            color: #fff;
        }

        h4 > a {
            font-size: 18px;
            color: #dfd1b5;
            text-decoration: none;
        }

        h4 > a:hover {
            color: red;
            text-decoration: none;

        }

        .news-text {
            width: 287px;
            height: 184px;
            text-align: left;
            color: #fff;
        }

        .news-text p {
            padding: 0 0 10px 0;
            margin: 0;
            color: #dfd1b5;
            font-size: 16px;
            line-height: 22px;
            font-weight: 200;
        }

        .news-text > .news-large {
            font-size: 22px;
            padding-bottom: 0;
        }

        .col-7.item-axis {
            width: 612px;
            height: 400px;
            float: left;
            min-height: 1px;
            padding-left: 15px;
            padding-right: 15px;
            position: relative;
            text-align: center;
            display: block;
            -webkit-box-sizing: border-box;
        }

        .item-axis-list.clearfix {
            padding-bottom: 40px;
            margin-left: 8%;
            position: relative;
            text-align: center;
        }

        .item-sou {
            background: rgba(106, 106, 106, 0.4) none repeat scroll 0 0;
            position: relative;
            height: 38px;
        }

        [type=text] {
            width: 100%;
            background: none;
            border: 0;
            outline: 0;
            -webkit-appearance: none;
            background-color: transparent;
            font-size: inherit;
            color: #fff;
            position: relative;
            padding: 10px 0 10px 35px;
        }

        .icon-sou {
            background-image: url("");
            width: 22px;
            height: 22px;
            background-size: 22px;
            background-repeat: no-repeat;
            background-position: center bottom;
            cursor: pointer;
            display: inline-block;
            position: absolute;
            left: 8px;
            top: 8px;
        }

        .item-sou button {
            position: absolute;
            right: 0;
            top: 0;
            bottom: 0;
            background: #dfd1b5;
            color: #302a34;
            border: none;
            padding: 9px 20px;
            font-size: 14px;
            cursor: pointer;
            font-weight: 200;
        }

        .clearfix.current {
            padding: 0;
            margin: 0;
            list-style-type: none;

        }

        .clearfix.current li {
            float: left;
            border-bottom: 1px solid #393939;
            padding: 0;
            margin: 0;
        }

        .axis-time {
            float: left;
            text-align: left;
            color: #fff;
            width: 95px;
            height: 62px;
            padding-right: 10px;
        }

        .axis-time h4 {
            font-weight: normal;
            font-size: 18px;
            color: #dfd1b5;
            margin-bottom: 0;
            text-align: left;
        }

        .axis-time span {
            font-size: 14px;
            color: #dfd1b5;
            margin-bottom: 0;
            font-weight: 200;
            text-align: left;
        }

        .axis-title {
            float: right;
            text-align: left;
            color: #fff;
            width: 400px;
            height: 106px;
        }

        .axis-title h5 {
            font-size: 18px;
            color: #dfd1b5;
            margin-bottom: 0;
            margin-top: 22px;
            font-weight: 200;
            text-align: left;
        }

        .axis-title p {
            font-size: 14px;
            color: #dfd1b5;
            margin-top: 0;
            padding-top: 10px;
            font-weight: 200;
        }

        #li_l1 {
            border-bottom: none;
        }

        .it_expert3 > div > ul > li > a:hover {
            color: #c30d23;
        }

        .deng-zhong {
            color: #dfd1b5;
        }

        .deng-zhong:hover { /*悬浮状态更改*/
            color: red;
            text-decoration: none;

        }

        /*------------------------------------中间部分美图----------------------------------------------*/
        #Taset {
            text-align: center;
            background: #302a34;
            width: 1430px;
            height: 2045px;
            position: relative;
        }

        #d7 {
            padding: 4px 5px;
            background: #dfd1b5;
            width: 145px;
            border-radius: 50px;
            margin: 0 auto;
            text-align: center;
            position: absolute;
            top: 0px;
            left: 650px;

        }

        #hbyb > img {
            width: 1430px;
            height: 390px;
            position: relative;
            top: 40px;
        }

        #hbyb1 {
            font-size: 20px;
            position: relative;
            top: 45px;
        }

        #hbyb2 {
            font-size: 14px;
            position: relative;
            top: 53px;
        }

        #xsy > img {
            width: 1430px;
            height: 390px;
            position: relative;
            top: 75px;
        }

        #xsy1 {
            font-size: 20px;
            position: relative;
            top: 80px;
        }

        #xsy2 {
            font-size: 14px;
            position: relative;
            top: 85px;
        }

        #kzt > img {
            width: 1430px;
            height: 390px;
            position: relative;
            top: 110px;
        }

        #kzt1 {
            font-size: 20px;
            position: relative;
            top: 115px;
        }

        #kzt2 {
            font-size: 14px;
            position: relative;
            top: 120px;
        }

        #lyrjb > img {
            width: 1430px;
            height: 390px;
            position: relative;
            top: 145px;
        }

        #lyrjb1 {
            font-size: 20px;
            position: relative;
            top: 150px;
        }

        #lyrjb2 {
            font-size: 14px;
            position: relative;
            top: 155px;
        }


        /*------------------------------------最下边------------------------------------------*/
        .deng-xia { /*下边整体*/
            width: 1430px;
            height: 108px;
            background-color: #aa2200;
            margin: 0 auto; /*居中*/
            position: relative; /*参照物*/


        }

        .deng-xia-1-5 { /*文本内容*/
            float: left;
            color: #dfd1b5;
            font-size: 20px;
            margin: 0;
            list-style-type: none; /*去掉图标*/
            overflow: hidden; /*避免为0*/
            position: relative;
            left: 170px;
            top: 40px;


        }

        .deng-xia > div > img { /*图片*/
            float: left;
            width: 43px;
            height: 50px;
            margin: 10px 20px;
            position: relative;
            left: 170px;
            top: 15px;

        }

        #deng-xia-1-6 { /*最最下边*/
            width: 1430px;
            height: 123px;
            background-color: #302a34;
            font-size: 12px;
            position: absolute;
            top: 100px;
            color: #f6f5f5;
        }

        #deng-xia-1-6 div {
            position: relative; /*相对定位*/
            top: 40px;
            text-align: center; /*文本内容居中*/
        }


    </style>
</head>
<body>

<div id="deng-shang-1">
    <div id="deng-shang-1-7">
        <a href=""><img id="deng-img-1-1"
                        src="https://www.17sucai.com/preview/10221/2017-05-23/zhukaoguan1/img/icon/site-brand.png"
                        alt=""></a>
        <ul id="deng-shang-1-2">
            <li class="deng-shang-1-3"><a class="deng-shang-1-4" href="">首页</a></li>
            <li class="deng-shang-1-3"><a class="deng-shang-1-4" href="shaokao-2.html">招牌美食</a></li>
            <li class="deng-shang-1-3"><a class="deng-shang-1-4" href="shaokao-3.html">招牌加盟</a></li>
            <li class="deng-shang-1-3"><a class="deng-shang-1-4" href="04.html">企业情况</a></li>
            <li class="deng-shang-1-3"><a class="deng-shang-1-4" href="shaokao-4.html">联系我们</a></li>
            <li v-if="user==''" class="deng-shang-1-3"><a class="deng-shang-1-4" href="/login.html">管理员入口</a></li>
            <li v-if="user!=''" class="deng-shang-1-3"><a class="deng-shang-1-4" href="/admin.html">管理页面</a></li>

        </ul>
    </div>
    <!------------------------------轮播图开始-------------------------------------->
    <html>
    <head>
        <meta charset="utf-8">
        <title>Bootstrap 实例 - 简单的轮播（Carousel）插件</title>
        <link rel="stylesheet" href="//cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="//cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
        <script src="//cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>
    <div id="myCarousel" class="carousel slide">
        <!-- 轮播（Carousel）指标 -->
        <ol class="carousel-indicators">
            <li v-for="(b,i) in b_arr" data-target="#myCarousel"
                :data-slide-to="i" :class="i==0?'active':''"></li>
        </ol>
        <!-------------------------- 轮播（Carousel）项目 -------------------->
        <div class="carousel-inner">
            <!--通过三目表达式控制第一个添加active -->
            <div v-for="(b,i) in b_arr"
                 :class="i==0?'item active':'item'">
                <img :src="b.url" alt="First slide">
                <div class="carousel-caption"></div>
            </div>

        </div>
        <!-- --------------------------轮播（Carousel）导航 ---------------->
        <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
    </body>
    </html>
    <!--------------------------------轮播图结束------------------------------------------------>
    <!----------------------------------老弟------------------------------------------------------>
    <section id="greenx">
        <ul>
            <div id="d4"><img src="https://www.17sucai.com/preview/10221/2017-05-23/zhukaoguan1/img/icon/icon-1.png"
                              alt="" width="200" height="200"></div>
            <div id="d5"><img src="https://www.17sucai.com/preview/10221/2017-05-23/zhukaoguan1/img/icon/icon-2.png"
                              alt="" width="200" height="200"></div>
            <div id="d6"><img src="https://www.17sucai.com/preview/10221/2017-05-23/zhukaoguan1/img/icon/icon-3.png"
                              alt="" width="200" height="200"></div>
            <div id="d1"><img src="" alt=""></div>
            <div id="d2"><img src="" alt=""></div>
            <div id="d3"><img src="" alt=""></div>

            <div style="color: #c30d23" id="d118">品牌特色</div>
            <div id="d10">品味</div>
            <div id="d11">PINWEI</div>
            <div id="d12">不平庸，不盲从，不怕错敢去做是90后和00<br>后的时代特征，主烤官从青春的品牌故事，<br>创新的菜品口味，
                亮眼的包装，多个方面为<br>年轻群体打造属于自己的烧烤店。
            </div>
            <div id="d13">口味</div>
            <div id="d14">KOUWEI</div>
            <div id="d15">味道要经过沉淀才能成熟主烤官项目以中创<br>永信（北京）食品科学研究院13年如一日从<br>原料，腌料，串法，烤法，
                蘸料多方面潜心<br>钻研。
            </div>
            <div id="d16">回味</div>
            <div id="d17">HUIWEI</div>
            <div id="d18">再好的青春，回忆的次数多了味道也就淡<BR>了。主烤官用心将青春的味道化作一道道美<BR>食完整的保留下来，为每位食客记
                录记忆中<BR>的青春，让每次回忆逗有滋有味。

            </div>


        </ul>
    </section>
    <!-------------------------------------兄弟--------------------------------------------------->
    <section id="philosophy">
        <div class="container">
            <div class="row">
                <div class="item-title" style="padding-bottom:30px">
                    <h1>新闻</h1>
                </div>
                <div class="col-5 item-news">
                    <div class="item-lists">
                        <div class="news-img"><a href="#"><img
                                src="https://www.17sucai.com/preview/10221//2017-05-23/zhukaoguan1/img/bj/news.jpg"
                                alt=""></a></div>
                        <div class="news-text">
                            <h4><a href="news-page.html">烤天下成都新店开张</a></h4>
                            <p>个性定位，打造极致体验，新店开张火爆成都，要玩要嗨就来烤天下，预定电话 8020113</p>
                            <p class="news-large">04-20</p>
                            <p>2021</p>
                        </div>
                    </div>
                </div>
                <div class="col-7 item-axis" id="news">
                    <div class="item-axis-list clearfix">
                        <div class="item-sou">
                            <form action="">
                                <input type="text" v-model="kw" placeholder="搜索以前的文章">
                                <i class="icon-sou"></i>
                                <button @click.prevent="search()">搜索</button>
                            </form>
                        </div>
                        <div class="it_expert3">
                            <div id="hot_ranks2">
                                <ul class="clearfix current" style="display:block">
                                    <li v-for="n in n_arr">
                                        <a class="a-a1" href="news-page.html">
                                            <div class="axis-time">
                                                <h4>05-16</h4>
                                                <span>2021</span>
                                            </div>
                                            <div class="axis-title">
                                                <h5><a class="deng-zhong" href="#" @click.prevent="jump(n.title)">{{n.title}}</a></h5>
                                                <p>{{n.intro}}</p>
                                            </div>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="button-cut">
						<span id="it_awewe" class="it_awewe">
							<a href="javascript:volid(0);" class="cut-up it_expertspan1" id="previous2"></a>
							<a href="javascript:volid(0);" class="cut-dow it_expertspan2" id="next2"></a>
						</span>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </section>
    <!------------------------------------第一页中间---------------------------------------------------->
    <section id="Taset">
        <div style="color:black" id="d7">招牌美食</div>
        <div>
            <div id="hbyb"><img src="https://www.17sucai.com/preview/10221/2017-05-23/zhukaoguan1/img/pd/ad-1.jpg">
            </div>
            <div style="color: #dfd1b6" id="hbyb1">火爆鸭脖</div>
            <div style="color: #dfd1b6" id="hbyb2">采用37味香料文火熬制16小时的高汤秘卤，即时冰冻锁味，再炸制金黄味香味，最后经过果木白
                炭烤制香酥的火焰鸭脖，历经层层工艺只为追求酥脆，骨肉分<br>离，回味无穷，白吃不腻的美味极致
            </div>
        </div>
        <div>
            <div id="xsy"><img src="https://www.17sucai.com/preview/10221/2017-05-23/zhukaoguan1/img/pd/ad-2.jpg"></div>
            <div style="color: #dfd1b6" id="xsy1">香酥鱼</div>
            <div style="color: #dfd1b6" id="xsy2">以色泽黄亮，色香味美，骨酥肉嫩，溢香爽口而著称的浙江绍兴酥鱼经过秘门的刀工，油炸
                和调料，外香里嫩，鲜酥可口，甜咸兼有，香味浓郁的酥鱼，让食客<br>赞不绝口。
            </div>
        </div>
        <div>
            <div id="kzt"><img src="https://www.17sucai.com/preview/10221/2017-05-23/zhukaoguan1/img/pd/ad-3.jpg"></div>
            <div style="color: #dfd1b6" id="kzt1">烤猪蹄</div>
            <div style="color: #dfd1b6" id="kzt2">胶原蛋白美容圣品烤猪蹄，精选48余种名贵中草药调制而成。以
                秘制酱料精心调配烧烤，不油腻，不上火，骨酥肉嫩，鲜香麻辣，十里飘香，令人胃口打开，百<br>吃不厌，吃后久久回味。<br>
                主烤官不断突破口味难关，提供更丰富的选择，让食客每次尝到不同的味道，舌尖得到充分的享受。
            </div>
        </div>
        <div>
            <div id="lyrjb"><img src="https://www.17sucai.com/preview/10221/2017-05-23/zhukaoguan1/img/pd/ad-4.jpg">
            </div>
            <div style="color: #dfd1b6" id="lyrjb1">腊鸭肉卷饼</div>
            <div style="color: #dfd1b6" id="lyrjb2">以全麦优质粉加鸡蛋与牛奶和面的面饼，口感绵软又劲道，包裹冬笋丝，香菇
                ，菜心丝，豆芽各种蔬菜，和独家配方秘制烟熏鸭脯肉等馅料
            </div>
        </div>

    </section>

    <!----------------------------------------第一页最下边------------------------------------------------>
    <div class="deng-xia">
        <div>
            <img src="https://www.17sucai.com/preview/10221/2017-05-23/zhukaoguan1/img/icon/f-1.png" alt="">
            <h3 class="deng-xia-1-5">半成品输出，极速配送</h3>
        </div>
        <div>
            <img src="https://www.17sucai.com/preview/10221/2017-05-23/zhukaoguan1/img/icon/f-2.png" alt="">
            <h3 class="deng-xia-1-5">优质产地，严格品控</h3>
        </div>
        <div>
            <img src="https://www.17sucai.com/preview/10221/2017-05-23/zhukaoguan1/img/icon/f-3.png" alt="">
            <h3 class="deng-xia-1-5">品类齐全，口味丰富</h3>
        </div>
        <div>
            <img src="https://www.17sucai.com/preview/10221/2017-05-23/zhukaoguan1/img/icon/f-4.png" alt="">
            <h3 class="deng-xia-1-5">菜品创新，活动迭代</h3>
        </div>

        <div id="deng-xia-1-6">
            <div>联系电话:13889862323 地址:沈阳三好中心 联系人:月初不加班小组</div>
            <div>Copyright © 2019-2021 www.a-ui.cn 地址：沈阳市皇姑区黄河大街昆山路43号</div>
        </div>
    </div>


</div>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<!--引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!--引入axion-->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script src="js/banner.js"></script>
<script src="js/index.js">
</script>
</body>
</html>